<template>
  <el-dialog title="告警管理" custom-class="acd-dialog" :close-on-click-modal="false" :modal="false"
    :visible.sync="warningDialog" :before-close="handleClose">
    <el-container style="height:100%">
      <el-header style="height:10%">
        <!-- 搜索框 -->
        <el-autocomplete class="inline-input" v-model="searchKey" :fetch-suggestions="querySearch" placeholder="请输入内容"
          :trigger-on-focus="false" @select="handleSelect" popper-class="default-select-popper">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-autocomplete>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div class="aside">
            <div class="main-part">告警区域</div>
            <div class="part checked">总部</div>
            <div class="part">南区</div>
            <div class="part">西区</div>
          </div>
        </el-aside>
        <el-main>
          <el-table ref="acdTable" height="400" style="width: 100%" :highlight-current-row="true"
            cell-class-name="table-cell-custom" header-cell-class-name="table-herder-custom" size="small">
            <el-table-column prop="orifilename" show-overflow-tooltip label="告警设备名称"></el-table-column>
            <el-table-column prop="filesize" label="告警设备状态"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <div slot="footer" class="dialog-footer"></div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    warningDialog: Boolean,
  },
  components: {},
  data() {
    return {
      dialogAdd: false,
      form: { group: [] },
      timer: [1, 2, 3, 4, 5],
      showTree: false,
      value: '',
      groupIndex: '',
      value1: '',
      callTypeMaps: [
        {
          key: '1',
          name: '全部',
        },
        {
          key: '2',
          name: '呼入',
        },
        {
          key: '3',
          name: '紧急呼入',
        },
        {
          key: '2',
          name: '准备呼出',
        },
        {
          key: '2',
          name: '广播',
        },
        {
          key: '2',
          name: '组呼',
        },
        {
          key: '2',
          name: '选呼',
        },
        {
          key: '2',
          name: '点名',
        },
        {
          key: '2',
          name: '轮询',
        },
        {
          key: '2',
          name: '会议',
        },
        {
          key: '2',
          name: '监听',
        },
        {
          key: '2',
          name: '强插',
        },
        {
          key: '2',
          name: '强拆',
        },
      ],
      callResultMaps: [
        {
          key: 1,
          name: '全部',
        },
        {
          key: 1,
          name: '已接',
        },
        {
          key: 1,
          name: '未接',
        },
        {
          key: 1,
          name: '成功',
        },
        {
          key: 1,
          name: '失败',
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['userGroupTreeData']),
  },
  methods: {
    //关闭
    handleClose() {
      this.$emit('update:warningDialog', false)
    },
    // 添加组按钮
    addGroupDemo() {
      let obj = { id: '', name: '', level: '' }
      this.form.group.push(obj)
    },
    addGroup(index) {
      this.showTree = true
      this.groupIndex = index
      this.$nextTick(() => {
        this.$refs.groupTree.filter()
        this.form.group.forEach((item) => {
          let node = this.groupMap.get(item.groupID)
          if (node) {
            this.$refs.groupTree.setChecked(node.nid, true)
          }
        })
      })
    },
    // 组过滤
    groupFilter(value, data, node) {
      return data.obj.groupType === 'dispatchgroup'
    },
    // 组选择框改变
    groupCheckChange(node, checked) {
      if (checked) {
        if (!this.formData.group.some((g) => g.groupID === node.obj.groupID)) {
          this.formData.group.push({
            groupID: node.obj.groupID,
            groupName: node.obj.groupName,
          })
        }
      } else {
        let index = this.formData.group.findIndex(
          (g) => g.groupID === node.obj.groupID
        )
        if (idnex !== -1) this.formData.group.splice(index, 1)
      }
    },
    // 监听鼠标事件
    clickEvent(e) {
      var box = document.getElementsByClassName(
        `default-select-tree groupTree`
      )[0]
      if (box && !box.contains(e.target)) {
        this.showTree = false
      }
    },
    //组选择确定
    commitGroup() {
      let group = this.$refs.groupTree.getCurrentNode()
      if (group.children.length > 0) {
        this.$message.warning('请选择调度组')
        return
      }
      this.form.group[this.groupIndex].id = group.id
      this.form.group[this.groupIndex].name = group.label
      this.showTree = false
    },
    handleAddClose() {
      this.dialogAdd = false
    },
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener('click', this.clickEvent, true)
    })
  },
  destroyed() {
    document.removeEventListener('click', this.clickEvent, true)
  },
}
</script>

<style lang="scss" scoped>
/deep/.acd-dialog {
  cursor: default;
  background-color: #1a4969;
  .el-dialog__header {
    padding-top: 10px;
    text-align: center;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 0 15px;
    .inline-input {
      margin-bottom: 10px;
      width: 100%;
      .el-input__inner {
        background-color: #1a4969;
        color: #fff;
      }
      .el-autocomplete-suggestion li {
        color: white;
      }
    }
    .aside {
      color: white;
      margin: 20px;
      text-align: center;
      font-size: 16px;
      .main-part {
        height: 40px;
        line-height: 35px;
        background-color: #094482;
      }
      .part {
        height: 40px;
        line-height: 35px;
        background-color: #172a47;
      }
      .part:hover {
        border: 1px solid white;
        border-radius: 10px;
      }
      .checked {
        background-color: #409eff;
        border: 1px solid white;
        border-radius: 10px;
      }
    }
  }
  .el-dialog__footer {
    padding-bottom: 10px;
    .el-button {
      background-color: #1a4969;
      color: #fff;
      width: 70px;
    }
    .el-button:hover {
      background-color: #00b2ee;
    }
  }
  .el-table {
    td {
      border-bottom: 1px solid #2e67a8;
    }
    tr:hover > td {
      background-color: #2f6b8d;
    }
    background-color: #1a4969;
    .table-herder-custom {
      background-color: #2e67a8;
      color: #fff;
    }
    .table-cell-custom {
      background-color: #172a47;
      color: #fff;
      .el-link {
        color: #fff;
        margin-left: 20px;
        span {
          font-size: 10px;
        }
        &:hover {
          color: #06f7bb;
        }
      }
    }
    /deep/.el-table__body tr.current-row > td {
      background: #6bb5e6 !important;
    }
  }
  .el-dialog__wrapper {
    position: absolute;
    height: 100%;
    .inner-dialog {
      background-color: #1a4969;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0px;
      opacity: 0.96;
      .el-dialog__footer {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
      .back-to-list {
        color: #fff;
        height: 22px;
        width: 22px;
      }
      .el-form {
        .el-form-item__label {
          color: #fff;
        }
        .el-form-item__content {
          width: 80%;
        }
        .el-input__inner,
        .el-textarea__inner {
          background-color: #1a4969;
          color: #fff;
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: white;
        }
        .group-item {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          .svg-icon {
            width: 19px;
            height: 19px;
            margin-right: 5px;
            cursor: pointer;
          }
          .add-label {
            color: #fff;
            cursor: pointer;
          }
          .el-input__inner {
            width: 240px;
          }
          &.add {
            margin-left: -1px;
            font-size: 13px;
            label {
              margin-left: 3px;
            }
            .valid-rule {
              color: #f56c6c;
              margin-left: 20px;
              font-size: 12px;
            }
          }
          .set-defaultNo {
            margin-left: 10px;
            font-style: oblique;
            .el-radio__label {
              font-size: 10px;
            }
          }
        }
      }
      .el-upload {
        .el-button {
          color: #fff;
          background-color: #1a4969;
          margin-top: 10px;
          &:hover {
            background-color: #00b2ee;
          }
        }
      }
    }

    .trial-box {
      position: absolute;
      left: calc(50% - 100px);
      top: calc(50% - 50px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 5px;
      width: 200px;
      height: 100px;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      .el-row {
        color: #fff;
      }
      .trial-loading {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.2s infinite linear;
        @-webkit-keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        @keyframes loading {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      }
      .el-button {
        width: 70px;
        color: #fff;
        background-color: #1a4969;
        margin-top: 10px;
        &:hover {
          background-color: #00b2ee;
        }
      }
      .form-item-group {
        margin: 5px 0;
        .svg-button {
          height: 32px;
          display: flex;
          align-items: center;
          margin-bottom: 18px;
        }
      }
    }
  }
  .default-select-tree {
    right: 30px;
    position: absolute;
    bottom: 15%;
    height: 400px;
    width: 220px;
    background-color: #155175;
    border: 1px solid #fff;
    border-radius: 7px;
    z-index: 999999;
    .tree-scrollbar {
      border-radius: 7px;
      width: 100%;
      height: calc(100% - 40px);
      // background-color: #172a47;
      background-color: #155175;

      .el-tree {
        background-color: #155175 !important;
        color: #fff;
        /deep/.el-tree-node__content {
          height: 34px;
          cursor: default;
          background-color: #155175;
          &:hover {
            background-color: #616d70;
          }
        }
        /deep/.el-tree-node.is-current > .el-tree-node__content {
          background-color: #00b2ee !important;
          color: #ffffff;
        }
        .el-checkbox__input.is-checked {
          .el-checkbox__inner {
            background-color: green;
            border-color: green;
          }
        }
      }
    }
    /deep/.tree-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      margin-right: -20px !important;
    }
    text-align: center;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }
}
</style>